<script type="text/javascript">
{literal}
	$(document).ready(function() {
		$('#service_group_list').tablesorter();
		$('#service_group_list tbody tr:even').toggleClass('alt');
	});	
{/literal}
</script>
<br />

<div id="add_form" class="form_container" style="width: 400px;">
<form id="add_service_group_form" name="add_service_group_form">

    <div>
        <span id="status_message" style="font-style: italic; color: red;"></span>
    </div>
    <input type="hidden" id="service_group_id" name="service_group_id" value=""> 
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2" class="field" style="text-transform: uppercase">{translate}Service group detail{/translate}</td>
        </tr>
        <tr>
            <td class="label">{translate}Name{/translate}<span class="required">*</span></td>
            <td class="field">
               <input id="name" name="name" type="text" size="50" 
                    value=""> 
            </td>                                
        </tr>
        
        <tr>            
            <td colspan="2" style="text-align: right;">
            	<input id="button_add" type="button" value="{translate}Add new{/translate}" onclick="javascript:saveServiceGroup();">            	
            	<input id="button_save" type="button" value="{translate}Save{/translate}" onclick="javascript:saveServiceGroup();" style="display: none;">
            	<input id="button_cancel" type="button" value="{translate}Cancel{/translate}" onclick="javascript:cancelServiceGroup();" style="display: none;">
            </td>                                
        </tr>
    </table>
</form>
</div>

<div id="service_group_container" style="margin-top: 5px">
	<table id="service_group_list" cellspacing="0" cellpadding="0" class="grid" width="450px">
		<thead>
			<tr>
				<th class='first'>{translate}Service group name{/translate}</th>				
			</tr>
		</thead>
		<tbody>
		{foreach from=$serviceGroupList item=service_group}
			<tr id="{$service_group.service_group_id}">
			    <td class='first last'>
			        <a href="javascript:editServiceGroup({$service_group.service_group_id},'{$service_group.name}');" title="{translate}Edit service group name{/translate}">{$service_group.name}
			        </a>
			    </td>
			</tr>
		{/foreach}
		</tbody>
	</table>		
</div>